import * as echarts from '../../ec-canvas/echarts';

let chart = null;

function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {
    color: ['#ff3763', '#32c072', '#ffa914','#b31fff','#e0de25','#f55d4b','#2c96f9'],
    tooltip: {//提示框
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow',        // 默认为直线，可选为：'line' | 'shadow'
        lineStyle : {          // 直线指示器样式设置
          color: '#fff',
          width: 2,
          type: 'solid'
        }
      }
    },
    legend: {
      
      selectedMode:false,//取消图例上的点击事件
      padding: 10, // 图例内边距，单位px，默认各方向内边距为5，
      data: ['宝马', '大奔', '保时捷', '路虎', '奥迪', '大众', '凯迪拉克']
    },
    grid: {
       left: 20,
       right:20,
       bottom: 0,
       top: 50,
      containLabel: true
    },
   
    series: [
      {
        name: '第一季度',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [
          {value: 335, name: '宝马'},
          {value: 310, name: '大奔'},
          {value: 234, name: '保时捷'},
          {value: 335, name: '路虎'},
          {value: 548, name: '奥迪'},
          {value: 535, name: '大众'},
          {value: 248, name: '凯迪拉克'}
        ],
      }
    ]
  };

  chart.setOption(option);
  return chart;
}

Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () { },
      fail: function () { }
    }
  },
  data: {
    ec: {
      onInit: initChart
    }
  },

  onReady() {
    setTimeout(function () {
      // 获取 chart 实例的方式
      // console.log(chart)
    }, 2000);
  }
});
